<template>
	<view class="content">
		<view class="head" :style="{backgroundColor:color}">
			<uni-icons type="arrowleft" size="20" class="icon" @click="goback"></uni-icons>
			<view class="heard_word">
				{{title}}
			</view>
			<view class="heard_word_a" @click="popup">
				{{text}}
			</view>
			<uni-icons type="arrowdown" size="15" class="icon_a"></uni-icons>
			<uni-popup ref="popup" type="bottom">
				<view class="popup">
					<view class="popup_head">
						选择日期
					</view>
					<view class="switch">
						<view class="switch_right" :class="{switch_left:falg==0}" @click="cheang">
							{{frist}}
						</view>
						<view class="switch_right" :class="{switch_left:falg==1}" @click="cheang_a">
							{{second}}
						</view>
						<view class="switch_right" :class="{switch_left:falg==2}" @click="cheang_b">
							{{third}}
						</view>
						<view class="switch_right" :class="{switch_left:falg==4}" @click="cheang_c">
							{{fourth}}
						</view>
					</view>
					<view class="time">
						选择日期
					</view>
					<view class="time_icon">
						<image src="../../../../static/data_analysis/rili.png" mode=""></image>
						<view class="time_number" v-if="falg==0">
							{{date_h}}
						</view>
						<view class="time_number" v-if="falg==1">
							{{date_d}}
						</view>
						<view class="time_number" v-if="falg==2">
							{{date_m}}
						</view>
            <view class="custom" v-if="falg==4">
              <view class="date_right">
                <uni-datetime-picker type="date" :value="dates" start="2020-6-15" end="2025-6-15" @change="dateChange">
                </uni-datetime-picker>
              </view>
              <view class="date_word">
                -
              </view>
              <view class="date_right">
                <uni-datetime-picker type="date" :value="dates" start="2020-6-15" end="2025-6-15" @change="dateChange_a">
                </uni-datetime-picker>
              </view>
            </view>
					</view>
					<view class="popup_btn">
						<view class="btn_left">
							<button type="primary" plain="true" @click="cancel">取消</button>
						</view>
						<view class="btn_right">
							<button type="primary" @click="confirm">确认</button>
						</view>
					</view>
				</view>
			</uni-popup>
		</view>
	</view>
</template>
<script>
	import dateFtt from '@/util/dateFtt.js'
	export default {
		data() {
			return {
				falg: 0,
        dates:'',
        startTime: '',
        endTime: '',
				date_h: '',
				date_d: '',
				date_m: ''
			};
		},
		created() {
			// 格式化时间
			// 时
			this.date_h = this.dateFtt('yyyy-MM-dd hh', new Date())
			// 日
			this.date_d = this.dateFtt('yyyy-MM-dd', new Date())
			// 月
			this.date_m = this.dateFtt('yyyy-MM', new Date())
			// console.log('date', this.date_h,this.date_d,this.date_m)
		},
		methods: {
			cheang() {
				this.falg = 0
			},
			cheang_a() {
				this.falg = 1
			},
			cheang_b() {
				this.falg = 2
			},
			cheang_c() {
				this.falg = 4
			},
			goback() {
				uni.navigateBack()
			},
      dateChange(e) {
        this.startTime = e
        // console.log('0000',this.startTime)
      },
      dateChange_a(e) {
        this.endTime = e
        // console.log('0000',this.endTime)
      },
			popup() {
				// 通过组件定义的ref调用uni-popup方法
				this.$refs.popup.open()
			},
			cancel() {
				// 通过组件定义的ref调用uni-popup方法
				this.$refs.popup.close()
			},
			confirm() {
				if (this.falg == 0) {
					this.$emit('confirm', {
						date: this.date_h,
						choice: this.falg
					})
				}
				if (this.falg == 1) {
					this.$emit('confirm', {
						date: this.date_d,
						choice: this.falg
					})
				}
				if (this.falg == 2) {
					this.$emit('confirm', {
						date: this.date_m,
						choice: this.falg
					})
				}if (this.falg == 4) {
					this.$emit('confirm', {
						date: this.startTime+','+this.endTime,
						choice: this.falg
					})
				}
				// 通过组件定义的ref调用uni-popup方法
				this.$refs.popup.close()
			}
		},
		props: ['title', 'text', 'color', 'frist', 'second', 'third', 'fourth']
	}
</script>
<style lang="scss">
	.content {
		// margin-top: calc( var(--status-bar-height));
		width: 100%;
		position: fixed;
		z-index: 999;

	}
   .uni-datetime-picker-timebox[data-v-6e13d7e2]{
    border: none;
  }
	.head {
		overflow: hidden;
		position: relative;
		height: calc(88rpx + var(--status-bar-height));
		width: 100%;
		display: flex;
		justify-content: center;
		align-items: flex-end;
		margin: 0 !important;
	}

	.heard_word {
		font-size: 36rpx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: #333333;
		margin-bottom: 21rpx;
	}

	.icon {
		position: absolute;
		left: 40rpx;
		bottom: 25rpx;
	}

	.heard_word_a {
		position: absolute;
		right: 72rpx;
		bottom: 26rpx;
		font-size: 28rpx;
		font-family: PingFang-SC-Medium, PingFang-SC;
		font-weight: 500;
		color: #333333;
	}

	.icon_a {
		position: absolute;
		right: 30rpx;
		bottom: 30rpx;
	}

	.popup {
		height: 929rpx;
		background-color: #fff;
		border-radius: 20rpx 20rpx 0px 0px;
		overflow: hidden;
	}

	.popup_head {
		margin-top: 30rpx;
		text-align: center;
		font-size: 32rpx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: #333333;
	}

	.switch {
		display: flex;
		width: 702rpx;
		margin: 64rpx auto 0;
		border-radius: 8rpx;
		border: 1rpx solid #EAEAEA;
	}

	.switch_left {
		width: 175rpx;
		height: 66rpx;
		font-size: 24rpx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: #FFFFFF;
		line-height: 66rpx;
		text-align: center;
		background: #4EA1FF !important;
		border-radius: 8rpx;
	}

	.switch_right {
		width: 175rpx;
		height: 66rpx;
		font-size: 24rpx;
		font-weight: 500;
		line-height: 66rpx;
		text-align: center;
		background: #fff;
		border-right: 1rpx solid #EAEAEA;
	}

	.switch_right:last-child {
		border: none;
	}

	.time {
		margin: 60rpx 0 0 24rpx;
		font-size: 24rpx;
		font-family: PingFang-SC-Medium, PingFang-SC;
		font-weight: 500;
		color: #666666;
	}

	.time_icon {
		display: flex;
		margin: 20rpx auto 0;
		width: 702rpx;
		height: 66rpx;
		line-height: 66rpx;
		text-align: center;
		background: #FFFFFF;
		border-radius: 8rpx;
		border: 1rpx solid #EEEEEE;

		image {
			margin: 20rpx 0 0 30rpx;
			width: 24rpx;
			height: 24rpx;
		}
	}

	.time_number {
		margin-left: 21rpx;
		font-size: 24rpx;
		font-family: PingFang-SC-Medium, PingFang-SC;
		font-weight: 500;
		color: #333333;
	}

	.time_word {
		margin: 0 39rpx 0 60rpx;
		font-size: 24rpx;
		font-family: PingFang-SC-Medium, PingFang-SC;
		font-weight: 500;
		color: #999999;
	}

	.popup_btn {
		position: absolute;
		left: 24rpx;
		bottom: 30rpx;
		display: flex;
	}

	.btn_left {
		width: 242rpx;
		height: 80rpx;
		margin: 0 20rpx 20rpx 0;
	}

	.btn_right {
		width: 440rpx;
		height: 80rpx;
	}
  .custom{
    display: flex;
    justify-content: space-around;
    align-items: center;
    width: 600rpx;
    height: 66rpx;
    overflow: hidden;
    margin-left: 20rpx;
  }
  .date_right{
    font-size: 24rpx;
    width: 240rpx;
   
  }
  
</style>
